<template>
  <div class="detail" id="notebook-list">
    <header>
      <a href="#" class="btn" @click.prevent="onCreate()"
        ><i class="iconfont icon-plus"></i> 新建笔记本</a
      >
    </header>
    <main>
      <div class="layout">
        <h3>笔记本列表({{ notebooksList.length }})</h3>
        <div
          class="book-list"
          v-for="notebook in notebooksList"
          :key="notebook.id"
        >
          <router-link
            :to="`/note/?notebookId=${notebook.id}`"
            class="notebook"
          >
            <div>
              <span class="iconfont icon-notebook"></span> {{ notebook.title }}
              <span>{{ notebook.noteCounts }}</span>
              <span class="action" @click.stop.prevent="onEdit(notebook)"
                >编辑</span
              >
              <span class="action" @click.stop.prevent="onDelete(notebook)"
                >删除</span
              >
              <span class="date">{{ notebook.friendlyCreatedAt }}</span>
            </div>
          </router-link>
        </div>
      </div>
    </main>
  </div>
</template>
<script>

import { mapGetters, mapActions } from "vuex";
export default {
  name: "NotebooksList",
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["notebooksList"]),
  },
  created() {
    this.checkLogin({ path: "/login" });

    this.getNotebooks();
  },
  methods: {
    ...mapActions([
      "getNotebooks",
      "addNotebook",
      "updateNotebook",
      "deleteNotebook",
      "checkLogin",
    ]),
    onCreate() {
      this.$prompt("请输入笔记本标题", "创建", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        //不得超过30个字符
        inputPattern: /^.{1,30}$/,
        inputErrorMessage: "标题不能为空且不超过30个字符",
      }).then(({ value }) => {
        this.addNotebook({ title: value });
      });
    },
    onEdit(notebook) {
      let mTitle = "";
      this.$prompt("请输入笔记本标题", "修改", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        //不得超过30个字符
        inputPattern: /^.{1,35}$/,
        inputErrorMessage: "标题不能为空且不超过30个字符",
        inputValue: notebook.title,
      }).then(({ value }) => {
        mTitle = value;
        this.updateNotebook({ notebookId: notebook.id, title: value });
      });
    },
    onDelete(notebook) {
      this.$confirm("是否确认删除改笔记本", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteNotebook({ notebookId: notebook.id });
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/notebook-list.less");
</style>
